<template>
  <div>
    <nav-bar>
      <template v-slot:left></template>
      <template v-slot:title>个人中心</template>
    </nav-bar>
    <div class="box">
      <div class="user-info">
        <div class="info">
          <img
            src="https://ts1.cn.mm.bing.net/th?id=OIP-C.JPaFw0vH2f6Qy44aUfZ4jgAAAA&w=204&h=204&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
          />
          <div class="user-desc">
            <span>昵称：{{ user.name }}</span>
            <span>登录名：{{ user.email }}</span>
            <span>个性签名：大漠孤烟直，长河落日圆</span>
          </div>
        </div>
      </div>
      <ul class="user-box">
        <li @click="Topath('/collect')">
          <span>我的收藏</span><van-icon name="arrow" />
        </li>
        <li @click="Topath('/order')">
          <span>我的订单</span><van-icon name="arrow" />
        </li>
        <li @click="Topath('/setting')">
          <span>账号管理</span><van-icon name="arrow" />
        </li>
        <li @click="Topath('/address')">
          <span>地址管理</span><van-icon name="arrow" />
        </li>
        <li @click="Topath('/about')">
          <span>关于我们</span><van-icon name="arrow" />
        </li>
      </ul>
      <div style="padding: 30px">
        <van-button @click="tologout" round block color="#44BA80"
          >退出</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/NavBar.vue";
//退出的请求
import { logout, getUser } from "network/user.js";
//vant框架的Tost
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { onMounted, reactive, toRefs } from "vue";

export default {
  name: "ProliteView",
  components: { NavBar },
  setup() {
    const store = useStore();
    const router = useRouter();
    //退出功能
    const tologout = () => {
      logout().then((res) => {
        //登录成功
        if (res.status == "204") {
          Toast.success("退出成功");
          //清除tolen
          window, localStorage.setItem("token", "");
          store.commit("setIsLogin", false);
          setTimeout(() => {
            //跳转到登录页面
            router.push({ path: "/login" });
          }, 500);
        }
      });
    };
    //用户信息
    let state = reactive({
      user: {},
    });
    onMounted(() => {
      //加载用户信息
      getUser().then((res) => {
        state.user = res;
      });
    });
    const Topath = (path, query) => {
      router.push(path, query || {});
    };
    return {
      Topath,
      tologout,
      ...toRefs(state),
    };
  },
};
</script>

<style scoped>
.box {
  margin-top: 40px;
}
.box > .user-info {
  padding: 10px;
}
.box > .user-info > .info {
  height: auto;
  width: 100%;
  background: var(--color-high-text);
  padding: 20px;
  display: flex;
  border-radius: 10px;
}
.box > .user-info > .info > img {
  width: 80px;
  height: 80px;
  border-radius: 10px;
}
.box > .user-info > .info > .user-desc {
  padding-left: 20px;
  text-align: left;
  line-height: 25px;
}
.box > .user-info > .info > .user-desc > span {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
}
.box > .user-box {
  margin-top: 30px;
}
.box > .user-box > li {
  padding-left: 20px;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #fcfafa;
  text-align: left;
  position: relative;
  margin-bottom: 5px;
}
.van-icon {
  position: absolute;
  right: 15px;
  top: 17px;
}
</style>